<template>

    <!-- 店铺列表 -->
    <div class="store-status">
        <a @click="setShopStatus(0)" :class="{ active: form.status == 0 }">
            <span>All</span>
            <em v-text="form.total"></em>
        </a>

        <a @click="setShopStatus(1)" :class="{ active: form.status == 1 }" v-if="form.synced_count > 0">
            <span>Synced</span>
            <em v-text="form.synced_count"></em>
        </a>

        <a @click="setShopStatus(4)" :class="{ active: form.status == 4 }" v-if="form.to_be_updated_count > 0">
            <span>To be Updated</span>
            <em v-text="form.to_be_updated_count"></em>
        </a>

        <a @click="setShopStatus(5)" :class="{ active: form.status == 5 }" v-if="form.ignore_count > 0">
            <span>Ignore</span>
            <em v-text="form.ignore_count"></em>
        </a>

        <a @click="setShopStatus(2)" :class="{ active: form.status == 2 }" v-if="form.sync_failed > 0">
            <span>Synced failed</span>
            <em v-text="form.sync_failed || 0"></em>
        </a>

        <a @click="setShopStatus(3)" :class="{ active: form.status == 3 }" v-if="form.draft_count > 0">
            <span>Drafts</span>
            <em v-text="form.draft_count || 0"></em>
        </a>
    </div>

</template>

<script>
export default {
    props: {
        value: { type: Number, default: 0 },
        form: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            loading: false,
            dialog: false,
        };
    },
    methods: {
        setShopStatus (val) {
            this.$emit('input', val)
            this.$emit('change', val)
        },

    },
    mounted () { },
};
</script>

<style lang="scss" scoped>
.store-status {
    display: flex;
    a {
        padding: 10px 2px;
        line-height: 20px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        position: relative;
        margin-right: 18px;
        cursor: pointer;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: transparent;
            border-radius: 1px;
            transition: all 0.2s;
        }

        em {
            border-radius: 10px;
            border: 1px solid #e6e6e6;
            font-size: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            padding: 2px 4px;
            margin-left: 2px;
            min-width: 24px;
            height: 20px;
            line-height: 12px;
            box-sizing: border-box;
        }

        &:hover {
            &::before {
                background-color: #f6b2cd;
            }
        }

        &.active {
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            &::before {
                background-color: #ea4c89;
            }
        }
    }
}
</style>
